<template>
	<view class="container">
		<view class="detail_content">
			<uni-collapse accordion>
				<uni-collapse-item title="订单信息">
					<u-cell-group>
						<u-cell size="large" title="订单编号" :label="currentOrder.orderNo">
							<view slot="value">
								<u-tag v-if="currentOrder.paymentStatusCode === 0" type="info" text="待订单确认" size="mini"
									plain></u-tag>
								<u-tag v-if="currentOrder.paymentStatusCode === 1" type="primary" text="待发起审批"
									size="mini" plain></u-tag>
								<u-tag v-if="currentOrder.paymentStatusCode === 2" type="warning" text="非标待审批"
									size="mini" plain></u-tag>
								<u-tag v-if="currentOrder.paymentStatusCode === 3" type="primary" text="审批中" size="mini"
									plain></u-tag>
								<u-tag v-if="currentOrder.paymentStatusCode === 4" type="success" text="已支付" size="mini"
									plain></u-tag>
								<u-tag v-if="currentOrder.paymentStatusCode === 6" type="error" text="已驳回" size="mini"
									plain></u-tag>
								<u-tag v-if="currentOrder.paymentStatusCode === 7" type="warning" text="待非标确认"
									size="mini" plain></u-tag>
							</view>
						</u-cell>
						<u-cell size="large" title="更新后编号"
							:label="currentOrder.projectUpdateNumber || '—— ——'"></u-cell>
						<u-cell size="large" title="项目名称" :label="currentOrder.projectName || '—— ——'"></u-cell>
						<u-cell size="large" title="业主" :label="currentOrder.ownerName || '—— ——'"></u-cell>
						<u-cell size="large" title="业主付款单位" :label="currentOrder.payUnitName || '—— ——'"></u-cell>
						<u-cell size="large" title="付款单位开户行" :label="String(currentOrder.bank)"></u-cell>
						<u-cell size="large" title="付款单位账号" :label="currentOrder.ownerAccount || '—— ——'"></u-cell>
						<u-cell size="large" title="总用电量"
							:label="currentOrder.electricityConsumption || '—— ——'"></u-cell>
						<u-cell size="large" title="参考单价(元)"
							:label="currentOrder.electricityUnitNeed || '—— ——'"></u-cell>
						<u-cell size="large" title="参考价格(元)"
							:label="currentOrder.electricityAccountNeed|| '—— ——'"></u-cell>
						<u-cell size="large" title="实际单价(元)" :label="currentOrder.account|| '—— ——'"></u-cell>
						<u-cell size="large" title="实际价格(元)"
							:label="currentOrder.electricityAccountActual|| '—— ——'"></u-cell>
						<u-cell size="large" title="非标单价(元)" :label="currentOrder.targetAccount|| '—— ——'"></u-cell>
						<u-cell size="large" title="非标价格(元)"
							:label="currentOrder.electricityTargetNeed|| '—— ——'"></u-cell>
						<u-cell size="large" title="付款时间(元)" :label="currentOrder.payTime|| '—— ——'"></u-cell>
					</u-cell-group>
				</uni-collapse-item>
				<uni-collapse-item title="详情明细">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="50" align="center">序号</uni-th>
							<uni-th width="80" align="center">业主合同编号</uni-th>
							<uni-th width="80" align="center">用电量</uni-th>
							<uni-th width="80" align="center">参考单价</uni-th>
							<uni-th width="80" align="center">参考价格</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in orderDetails" :key="index">
							<uni-td align="center">{{ index+1 }}</uni-td>
							<uni-td align="center">{{item.contractCode}}</uni-td>
							<uni-td align="center">{{ item.electricityConsumption }}</uni-td>
							<uni-td align="center">{{ item.contractAccount }}</uni-td>
							<uni-td align="center">{{ item.electricityAccountNeed }}</uni-td>
						</uni-tr>
					</uni-table>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import {
		eleOwnerOrderDetails,
	} from '@/apis/eleOrder.js'
	export default {
		data() {
			return {
				currentOrder: {},
				orderDetails: []
			}
		},
		onLoad(options) {
			this.currentOrder = JSON.parse(options.data)
			this.getOrderDetails(this.currentOrder.id)
		},
		methods: {
			//获取详情
			async getOrderDetails(id) {
				const res = await eleOwnerOrderDetails(id)
				this.orderDetails = res.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 20rpx;
		overflow: auto;

		::v-deep .uni-collapse-item {
			.uni-collapse-item__title-text {
				font-size: 32rpx;
				font-weight: 700;
			}

			.u-cell-group {
				padding: 10rpx 20rpx;
				border: 1rpx solid #d0ebff;
			}

			.uni-table {
				border: 1rpx solid #d0ebff;
			}
		}
	}
</style>